<template>
  <el-dialog v-model="showDialog"
             :append-to-body="true"
             :close-on-click-modal="false"
             title="自定义展示数据"
             width="700px"
             class="no-padding-dialog"
             @close="handleCancel">
    <div class="members-dep-dialog__content">
      <EmployeeDepartment
          ref="employeeDepartmentRef"
          v-bind="$attrs"
          show-preview/>
    </div>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button v-debounce="handleConfirm" type="primary">确定</el-button>
    </span>
    </template>
  </el-dialog>
</template>

<script setup>
import EmployeeDepartment from './main'

defineOptions({
  name: 'MembersDepDialog',
  inheritAttrs: false,
})
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  }
})


const employeeDepartmentRef = ref()
const showDialog = computed(() => {
  return props.visible
})

// 提交按钮
function handleConfirm() {
  emits(
      'confirm',
      employeeDepartmentRef.value.userObjArray,
      employeeDepartmentRef.value.depObjArray
  )
  handleCancel()
}

const emits = defineEmits(['close', 'update:visible', 'confirm'])

/**
 * 取消选择
 */
function handleCancel() {
  emits('close',
      employeeDepartmentRef.value.userObjArray,
      employeeDepartmentRef.value.depObjArray
  )
  emits('update:visible', false)
}
</script>


<style scoped lang="scss">
.members-dep-dialog__content {
  margin: 0 15px 10px;
  border: 1px solid $xr-border-line-color;
  border-radius: $xr-border-radius-base;
}
</style>

